<template>
    <div>
        <headerSearch title="圈子产品" :searchBack="true" @done="gotobtn"></headerSearch>
         <!-- 搜索框 -->
        <rearchKey :search_intop="search_intop" :searchISshow="searchISshow" v-on:spot="spot" :clearShow="clearShow" @clearClick="clearClick" @searchCancel="searchCancel"></rearchKey>
        <div class="pagecontent main-product">
        
          <!-- 请输入企业名称 -->

          <div style="background-color: #fff;">
            <el-row class="block-col-2">
                <el-col :span="24">
                    <el-dropdown trigger="click" @command="handleCommand" >
                        <span class="el-dropdown-link" style="padding: 0 0.2rem;">
                            {{companyName}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown" style="width: 7.5rem;margin-left: -3.75 !important; margin-top:0 !important;left:0 !important;padding:0 !important;">
                            <el-dropdown-item icon="el-icon-plus" v-for="(colleague, ind) in CompanyList" :key="ind" :command="colleague" >{{colleague.name}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>  
          </div>
          <!-- 企业热销 -->
          <div class="industry_product">
            <div class="title_text_more">
              <h3>企业热销</h3>
            </div>
            <div class="host_item">
              <!-- <div style="font-size: 0.3rem; color: rgb(102, 102, 102);line-height: 0.5rem;height: 0.5rem;" v-if="purlist == ''">
                暂无数据  ╮(￣▽￣)╭
              </div> -->
              <div v-if="hostlist == ''" class="contentEmpty">
                  <img src="../common/images/Disappointment.png" alt="" style="height: auto !important;">
                  <em>暂无查询结果</em>
              </div>
              <ul v-else>
                <li v-for="(host, p) in hostlist" :key="p" @click="jumpProduct(host.IDProduct)">
                  <a href="javascript:void(0)">
                    <strong class="hot_product_img">
                      <img src="../common/images/cm_03.jpg" v-if="host.smallImg == null">
                      <img :src="host.smallImg" alt="" v-else>
                    </strong>
                    <span>{{host.chrName}}</span>
                    <span>已售<strong>{{host.NumS}}</strong>件</span>
                  </a>
                </li>
              </ul>
              </div>
          </div>
          <!-- 全部商品 -->
          <div class="industry_product rush_to_purchase">
            <div class="purchase_title title_text_more">
              <h3><span>全部商品</span></h3>
            </div>
            <div class="purchase">
              <!-- <div style="font-size: 0.3rem; color: rgb(102, 102, 102);line-height: 0.5rem;height: 0.5rem;" v-if="purlist == ''">
                --&nbsp;暂无数据&nbsp;--
            </div> -->
						<ul class="purchase_list clear">
							<li v-for="(pur, p) in purlist" :key="p" @click="jumpProduct(pur.IDProduct)">
								<a href="javascript:void(0)">
                  <small class="all_product_img">
                    <img src="../common/images/cm_03.jpg" v-if="pur.smallImg == null">
                    <img :src="pur.smallImg" alt="" v-else>
                  </small>
									
									<span>{{pur.chrName}}</span>
									<span>已售<strong>{{pur.NumS}}</strong>件</span>
								</a>
							</li>
						</ul>
            <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
                <span slot="no-more" class="contentEmpty">
                  <template v-if="purlist.length">
                      (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                  </template>
                  <template v-if="!purlist.length">
                    <img src="../common/images/failedLoad.png" alt="">
                    <em>暂无查询结果</em>
                  </template>
                </span>
                <span slot="no-results" class="contentEmpty">
                    <template v-if="purlist.length">
                        (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                    </template>
                    <template v-if="!purlist.length">
                        <img src="../common/images/failedLoad.png" alt="">
                        <em>暂无查询结果</em>
                    </template>
                </span>
                <!-- <span slot="no-more">
                (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                </span>
                <span slot="no-results" class="contentEmpty">
                    <template v-if="purlist.length">
                        (ฅ>ω<*ฅ)我们是有底线的(ฅ>ω<*ฅ)
                    </template>
                    <template v-if="!purlist.length">
                        <img src="../common/images/failedLoad.png" alt="">
                        <em>暂无查询结果</em>
                    </template>
                </span> -->
            </infinite-loading>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
import headerSearch from '../public/header-search.vue';
import rearchKey from '../public/rearchKey';
import InfiniteLoading from 'vue-infinite-loading';
    export default {
        data() {
            return {
              // path:'http://fc.x.e000.com',
                placeholder: '请输入企业名称',
                companyName: '',
                cid:'',
                CompanyList:[],
                companyName:'所有企业',
                hostlist: [],
                page:0,
                num:10,
                search_intop: '',      //遮罩层样式
                searche: '',            //输入内容
                searchISshow: false,  
                clearShow: false,     //清除内容
                ptype:0,
                purlist: [],
            }
        },
        mounted() {
          let that = this;
          that.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
          that.access_token = window.localStorage.getItem('access_token');
          that.cid = that.$route.query.cid;
          //获取当前圈子所有产品
          that.getCircleAllProduct();
          //获取圈子中的企业
          that.getUserEnterprise();
        },
        watch: {
            searche(value) {
                if(value != '') {
                  this.clearShow = true;
                  this.search_intop = 'background-color: transparent; z-index: 0;';
                }else {
                  this.clearShow = false;
                  this.search_intop = 'background-color: rgba(0, 0, 0, 0.5);';
                }
            }
        },
        methods: {
          // 获取 监听子组件input值的动向值
          spot(data) {
              this.searche = data;
              this.ptype = 1;
              this.onInfinite();
          },
          onInfinite() {
              let that = this;
              console.log("触发");
              setTimeout(() => {       
                  const temp = []; 
                  let keyword = this.searche;
                  if(!keyword) keyword = 0;
                  // let page = that.page;
                  let cid = that.cid;
                  //排序
                  let page = '';
                  if(that.ptype == 1){
                      that.purlist = [];
                      page = 0;
                  }else{
                      if(that.page == 0){
                          page = 1;
                      }else{
                          page = that.page;
                      }
                  }
                  console.log('key',page);
                  that.$fetch(that.$path+'/api.php/Circle/getCircleAllProduct', {cid:cid,cpId:0,page:page,keyword})
                      .then((res) => {
                      console.log('首页',res);
                      // if(res.code == 200){
                      // let array = res.data;
                      // that.page++;
                      // if(that.num > array.length){
                      //     $state.complete();
                      //     return;
                      // }
                      // array.forEach(element => {
                      //     temp.push(element);
                      // });
                      //   that.purlist = that.purlist.concat(temp);  
                      //   $state.loaded();  
                      // }else {
                      //     $state.complete();
                      //     return;
                      // } 
                      
                       if(res.code == 200){
                          let array = res.data.all;
                          // array.reverse();
                          page++;
                          that.page = page;

                          if(array == '') {
                              that.purlist = [];
                          }else {
                              array.forEach(element => {
                                  temp.push(element);
                              });
                              that.purlist = that.purlist.concat(temp); 
                              console.log('999',that.purlist);  
                              if(that.num > array.length){
                                  that.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                                  return;
                              }
                          }
                        
                          // that.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                          that.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        }else {
                          
                            that.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                            return;
                        }  
                        that.ptype = 0;  
                    });   

              }, 1000);
          },
          companyClick(company_name) {
            this.companyName = company_name;
          },
          //点击商品查看详情
          jumpProduct(val){
            console.log(val);
            this.$router.push({
                path: '/productDetail',
                query: {id: val}
            })
          },
          //获取当前圈子所有的产品
          getCircleAllProduct(){
            let that = this;
            let keyword = this.searche;
            if(!keyword) keyword = 0;
            let page = that.page;
            let cid = that.cid;
            that.$fetch(that.$path+'/api.php/Circle/getCircleAllProduct',{cid:cid,cpId:0,page,keyword})
            .then((res) => {
              console.log('圈子信息',res);
              if(res.code == 200){
                that.purlist = res.data.all;
                that.hostlist = res.data.host;
              }    
            });
          },
          //获取圈子中的企业
          getUserEnterprise:function(){
            let that = this;
            let cid = that.cid;

            this.$fetch(that.$path+'/api.php/Circle/getCircleCompanyList',{cid:cid})
            .then((res) => {
              console.log('圈子企业',res);
              that.CompanyList = res.data.list;
            })
          },
          handleCommand(command) {

              let c_info = command;
              let c_id = c_info.id;
              this.companyName = c_info.name;
              // let userId = this.userInfo.uid;
              // let request = this.request;
              //获取所选的企业下面的产品
              this.$fetch(this.$path + '/index.php/api/ProductList', {c_id}).then((response) => {
                  if(response.code == 200) {
                    this.purlist = response.data;
                    if(response.data){
                        response.data.forEach((element,index) => {
                          this.hostlist.splice(0,0,{id:element.IDProduct,name:element.chrName,img:element.smallImg,date_time:element.dtCreate,Num:element.NumS,check:false});
                        });
                    }
                    
                  }else{
                    this.hostlist = [];
                    this.purlist = [];
                  }
              })
            
              
          },
          // 点击搜索图标出现搜索框
          gotobtn() {
              this.searchISshow = true;
          },
          // 点击取消隐藏搜索框
          searchCancel(data) {
              this.searchISshow = false;
              data = '';
          },
          // 清除内容
          clearClick(data) {
              // this.clearShow = false;
              data = '';
          },

        },
        computed: {
            //过滤方法
          // purlist: function() {
          //   let that = this;
          //     var _search = that.searche;
          //     console.log()
          //     if (_search) {
          //         //不区分大小写处理
          //         var reg = new RegExp(_search, 'ig')
          //         //es6 filter过滤匹配，有则返回当前，无则返回所有
          //         return that.items.filter(function(e) {
          //             //匹配所有字段
          //             return Object.keys(e).some(function(key) {
          //                 let data = e.chrName + e.NumS;
          //                 return data.match(reg);
          //             })
          //             //匹配某个字段
          //             //  return e.name.match(reg);
          //         })
          //     };
          //     return that.items;
          // }
        },  
        components: {
            headerSearch,
            rearchKey,
            InfiniteLoading
        },
    }
</script>

<style>

.el-row {
    /* border-bottom: 0.2rem solid #f5f5f5; */
}
/* 全部同事 */
.el-col-24 {
    height: 1rem;
    line-height: 1rem;
    /* padding: 0 0.2rem; */
    box-sizing: border-box;
}
/* 全部同事第一层级 */
.el-col-24 .el-dropdown {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    box-shadow: none;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    display: block;
}
/* 文字 */
 .el-dropdown-link {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
    cursor: pointer;
    display: block;
    /* padding: 0 0.2rem; */
}
  /* 下拉icon */
.el-icon--right {
    float: right;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
}
/* 下拉层级 */
.el-dropdown-menu {
    /* width: 100%;
    height: auto;
    box-shadow: none;
    left: 47% !important;
    margin: 0;
    margin-left: -50%;
    padding: 0;
    margin-top: 0 !important; */
}
/* 三角符号 */
.el-popper .popper__arrow, .el-popper .popper__arrow::after {
    display: none;
}
/* 下拉item */
.el-dropdown-menu__item {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
    padding: 0 0.2rem;
    box-sizing: border-box;
}


.main-product {
    background-color: #fff;
}
/***企业热销****/
.industry_product {
    border-top: 0.2rem solid #f4f5f7;
    margin-top: -0.2rem;
    margin-bottom: 0.2rem;
}

/***全部商品****/
.rush_to_purchase {
    padding-bottom: 0;
    margin-bottom: 0;
} 

</style>